<?php
$purchases = DbUtils::get($myPdo,  TABLE_NAME_PREFIX_PLUGIN . 'ecom_purchase', $cond_vals,  't.attr_opt_code', 'ASC', NULL, NULL, NULL)->d;
?>
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="etalage/css/etalage.css">
    <script src="../../../libs/jquery/jquery-1.9.0.min.js"></script>
    <script src="etalage/js/jquery.etalage.min.js"></script>
    <link href="jquery_ui/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet">
    <script src="../../../libs/jquery_ui/js/jquery-ui-1.10.2.custom.js"></script>
    <script>
      $(document).ready(function(){
        $('#etalage').etalage({
          thumb_image_width: 320,
          thumb_image_height: 240,
          source_image_width: 800,
          source_image_height: 600,
          small_thumbs: 5
        });
        $( "#tabs" ).tabs({ show: { effect: "blind", duration: 300 }, active: <?php echo $active_tab; ?>, heightStyle: 'auto' });
        var MIN = 1;
        $( "#qty" ).spinner({ min: MIN });
        $('#qty').on('keyup', function(e) {
          var v = parseInt($(this).val());
          if (isNaN(v)) {
             return $(this).val(MIN);
          }
          if ($(this).val() < MIN) {
             $(this).val(MIN);
          } else {
             $(this).val(v);
          }
        });
      });
    </script>
    <style>
      * {
        font-family: Trebuchet MS;
        font-size: 12px;
      }
      #etalage{
        margin-right: 10px;
      }
      table.lo {
        width: 100%;
      }
      table.lo td {
        vertical-align: top;
        text-align: left;
      }
      table.lo td.img {
        width: 320px;
      }
      table.lo td.item {
        width: 400px;
        overflow-x: hidden;
      }
      table.lo td.more {
        width: 230px;
      }
      div.title {
        border-bottom: 1px dotted #ddd;
        font-size: 16px !important;
        font-weight: bold;
        word-wrap: break-word;
        font-family: Lucida Sans Unicode;
        padding-bottom: 5px;
        width: 400px;
      }
      div.section {
        border-bottom: 1px dotted #ddd;
        word-wrap: break-word;
        width: 400px;
      }
      div.attrs {
        border: 1px solid #E7DBB1;
        background: #FFFEE6;
        padding: 5px;
        margin: 5px;
      }
      table.custom {
        background-color: #fff;
        margin: 10px 0 10px 10px;
        width: 95%;
      }
      table.custom td {
        height: 25px;
        color: #333;
        vertical-align: middle
      }
      table.custom td.title {
        width: 100px;
        font-size: 13px;
      }
      table.custom td.dot {
        color: #ff8000;
      }
      table.custom td.mkt {
        text-decoration: line-through;
        font-size: 11px;
        color: #aaa;
      }
      table.custom td.sale {
        font-size: 18px;
        color: #ff8000;
        font-weight: bold;
      }
      input.price {
        background: #fff;
        font-size: 18px;
        color: #ff8000;
        font-weight: bold;
        border: none;
      }
      input.selected {
        background: #FFFEE6;
        border: none;
        font-weight: bold;
        font-family: Lucida Sans Unicode;
        color: #666;
      }
      input.stock {
        background: #FFFEE6;
        border: none;
        font-weight: bold;
        font-family: Lucida Sans Unicode;
        color: #666;
        width: 30px;
      }
      span.form3 {
        background-color: #999;
        border: 1px solid #666;
        color: #fff;
        padding: 2px;
        cursor: pointer;
        margin: 2px 0 0 2px;
        display: inline-block;
        width: 35px;
        overflow: hidden;
        height: 20px;
      }
      span.form3:hover {
        background: #eee;
        color: #333;
      }
      span.hi {
        background-color: #fff;
        color: #000;
      }
      table.form {
        border-top: 1px solid #aaa;
        border-left: 1px solid #aaa;
      }
      table.form td {
        vertical-align: middle;
        height: 25px;
      }
      table.form td.title {
        background-color: #eee;
        border-bottom: 1px solid #aaa;
        border-right: 1px solid #aaa;
        width: 120px;
        color: #000;
        padding: 3px 5px; 
        vertical-align: top;
        font-weight: bold;
      }
      table.form td.content {
        padding-left: 2px;
        border-bottom: 1px solid #aaa;
        border-right: 1px solid #aaa;
        width: 610px;
      }
      table.form td.content input[type=text],textarea {
        width: 600px;
        border: 0;
        padding: 0;
        margin: 0;
      }
      table.form td.content input[type=text] {
        height: 20px;
      }
      table.form td.content textarea {
        height: 250px;
        resize: none;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .imgbtn {
        background-image: url(images/send.png);
        background-repeat: no-repeat;
        background-position: 5px 2px;
        padding: 5px 5px 5px 30px;
        border: 1px solid #666;
        background-color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      .imgbtn:hover {
        background-color: #eee;
      }
      .cart {
        background-image: url(images/cart.png);
        background-repeat: no-repeat;
        height: 40px;
        width: 120px;
        padding-left: 40px;
        font-family: Lucida Sans Unicode;
      }
    </style>
  </head>
  <body>
    <table class="lo" cellpadding=0 cellspacing=0>
      <tr>
        <td class="img">
          <ul id="etalage">
            <?php foreach ($images as &$image) { ?>
            <li>
              <img class="etalage_thumb_image" src="<?php echo $image->file; ?>">
              <img class="etalage_source_image" src="<?php echo $image->file; ?>">
            </li>
            <?php } ?>
          </ul>
        </td>
        <td class="item">
          <form action="<?php echo basename(__FILE__, '.php'); ?>.server.php" method="post">
            <input type="text" name="action" value="add_to_cart" style="display: none;"></input>
            <input type="text" name="to" value="http://<?php echo URL . '?i=' . $page_id . '&script=index_cart' ?>" style="display: none;"></input>
            <input type="text" name="from" value="http://<?php echo URL . '?i=' . $page_id . '&id=' . $product_id; ?>" style="display: none;"></input>
            <input type="text" name="sel_attrs" id="sel_attrs" value="<?php echo htmlspecialchars(json_encode($attrs)); ?>" style="display: none;"></input>
            <input type="text" name="attr_opt_id" id="attr_opt_id" value="" style="display: none;"></input>
            <input type="text" name="product_track_id" value="<?php echo $product_id; ?>" style="display: none;"></input>
            <input type="text" name="product" value="<?php echo $product->name; ?>" style="display: none;"></input>
            <div class="title"><?php echo $product->name; ?></div>
            <div class="section" style="min-height: 100px;"><?php echo $product->intro; ?></div>
            <div class="section">
              <table class="custom" cellpadding=0 cellspacing=0>
                <tr>
                  <td class="dot">&#8226;</td>
                  <td class="title">Market Price</td>
                  <td class="mkt">$<?php echo $product->price; ?></td>
                </tr>
                <tr>
                  <td class="dot">&#8226;</td>
                  <td class="title">Sale Price</td>
                  <td class="sale">$<input name="price" id="price" class="price" type="text" value="<?php echo $sale_price; ?>" readonly=1></input></td>
                </tr>
                <tr>
                  <td class="dot">&#8226;</td>
                  <td class="title">Save</td>
                  <td class="save">$<?php echo $product->price - $sale_price; ?></td>
                </tr>
              </table>
            </div>
            <div class="section" style="border-bottom: none;">
              <div class="attrs">
                <?php if (count($attrs) > 0) { ?>
                <div><b>Selected:</b> <input name="attr_opt_code" id="selected" class="selected" type="text" readonly=1></input></div>
                <div>&nbsp;</div>
                <div id="attrs"></div>
                <div>&nbsp;</div>
                <?php } ?>
                <div>
                  <label for="qty" style="width: 60px;"><b>Qty:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></label>
                  <input name="qty" id="qty" name="value" <?php if (isset($_SESSION[$product_id . 'qty'])) { echo "value=\"" . $_SESSION[$product_id . 'qty'] . "\""; } else { echo 'value="1"'; } ?> style="width: 40px;"/>
                  <?php if ($product->enabled_stock == 1) { ?>
                  <label><b>&nbsp;&nbsp;(Left in Stock:&nbsp;</b></label>
                  <input name="stock" id="stock" class="stock" readonly=1/>
                  <label><b>)</b></label>
                  <?php } ?>
                </div>
              </div>
            </div>
            <?php if (isset($_SESSION[$product_id . 'cart_err'])) { ?>
            <div style="color: red; margin: 2px 0;"><?php echo $_SESSION[$product_id . 'cart_err']; ?></div>
            <?php } ?>
            <div style="margin-top: 5px;">
              <table cellpadding=0 cellspacing=0>
                <tr>
                  <td><input type="submit" value="Add to Cart" class="imgbtn cart" onclick="document.getElementById('cart_load').style.display='block';"></input></td>
                  <td style="padding-left: 10px;"><img id="cart_load"  style="display: none;border: none;" src="images/loading.gif"></img></td>
                </tr>
              </table>
            </div>
          </form>
          <div>&nbsp;</div>
        </td>
        <td class="more">&nbsp;</td>
      </tr>
      <tr>
        <td colspan=2>
          <div id="tabs" style="width: 740px;">
            <ul>
              <li><a href="#tabs-1">Product Detail</a></li>
              <li><a href="#tabs-2">Ask a question</a></li>
            </ul>
            <div id="tabs-1"><?php echo $product->details; ?></div>
            <div id="tabs-2">
              <form action="<?php echo basename(__FILE__, '.php'); ?>.server.php" method="post">
                <input type="text" name="action" value="send" style="display: none;"></input>
                <input type="text" name="product_track_id" value="<?php echo $product_id; ?>" style="display: none;"></input>
                <input type="text" name="to" value="<?php echo MiscUtils::curPageURL(); ?>" style="display: none;"></input>
                <input type="text" name="from" value="<?php echo MiscUtils::curPageURL(); ?>" style="display: none;"></input>
                <table class="form" cellpadding=0 cellspacing=0>
                  <tr>
                    <td class="title">Subject</td>
                    <td class="content"><input name="subject" type="text" value="Question about '<?php echo $product->name; ?>'" readonly=1></input></td>
                  </tr>
                  <tr>
                    <td class="title">Email</td>
                    <td class="content">
                      <input name="email" type="text" <?php if (isset($_SESSION[$product_id . 'email'])) echo "value=\"" . $_SESSION[$product_id . 'email'] . "\""; ?>></input>
                      <?php if (isset($_SESSION[$product_id . 'email_err'])) { ?>
                      <div style="color: red;"><?php echo $_SESSION[$product_id . 'email_err']; ?></div>
                      <?php } ?>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">Name</td>
                    <td class="content"><input name="name" type="text" <?php if (isset($_SESSION[$product_id . 'name'])) echo "value=\"" . $_SESSION[$product_id . 'name'] . "\""; ?>></input></td>
                  </tr>
                  <tr>
                    <td class="title">Phone</td>
                    <td class="content"><input name="phone" type="text" <?php if (isset($_SESSION[$product_id . 'phone'])) echo "value=\"" . $_SESSION[$product_id . 'phone'] . "\""; ?>></input></td>
                  </tr>
                  <tr>
                    <td class="title">Message</td>
                    <td class="content"><textarea name="message" ><?php if (isset($_SESSION[$product_id . 'message'])) echo $_SESSION[$product_id . 'message']; ?></textarea></td>
                  </tr>
                </table>
                <div style="text-align: center; margin-top: 5px;">
                  <table cellpadding=0 cellspacing=0 style="margin: 0 auto;">
                    <tr>
                      <td><input type="submit" value="Send" class="imgbtn" onclick="document.getElementById('send_load').style.display='block';"></input></td>
                      <td style="padding-left: 10px;"><img id="send_load"  style="display: none;border: none;" src="images/loading.gif"></img></td>
                    </tr>
                  </table>
                </div>
              </form>
            </div>
          </div>
        </td>
        <td></td>
      </tr>
    </table>
    
    <script type="text/javascript" src="../../../incls/js/myutils.js"></script>
    <script type="text/javascript" src="../../../libs/json/json2.js"></script>
    <script type="text/javascript">
      var _item = JSON.parse('<?php echo addslashes(json_encode($product)); ?>');
      var _attrs = JSON.parse('<?php echo isset($attrs) ? addslashes(json_encode($attrs)) : '[]'; ?>');
      var _objects = JSON.parse('<?php echo isset($objects) ? addslashes(json_encode($objects)) : '[]'; ?>');
      var _cart = JSON.parse('<?php echo addslashes(json_encode($_SESSION['my_cart'])); ?>');
      
      $(function(){
        parent.document.title += ' - ' + _item.name;
        <?php if (count($attrs) > 0) { ?>
          <?php if (isset($_SESSION[$product_id . 'sel_attrs'])) { ?>
          _attrs = JSON.parse('<?php echo addslashes(json_encode($_SESSION[$product_id . 'sel_attrs'])); ?>');
          <?php } ?>
          set_attrs();
        <?php } else { ?>
          <?php if ($product->enabled_stock == 1) { ?>
          $('#stock')[0].value = _item.stock;
          if (_item.stock == 0) {
            $('#stock')[0].style.color = '#ff0000';
          }
          for (var idx in _cart) {
            var obj = _cart[idx];
            if (obj.product_track_id == '<?php echo $product_id; ?>') {
              $('#stock')[0].value -= obj.quantity;
              $('#stock')[0].value = Math.max($('#stock')[0].value, 0);
            }
          }
          <?php } ?>
        <?php } ?>
      });

      function update_selected() {
        <?php if ($product->enabled_stock == 1) { ?>
        $('#stock')[0].value = '';
        $('#stock')[0].style.color = '#666';
        <?php } ?>
        var str = '';
        var attr_opt_id = ''
        for (var idx in _attrs) {
          var obj = _attrs[idx];
          for (var idx2 in obj._opts) {
            var obj2 = obj._opts[idx2];
            if (obj2._s) {
              if (str != '') {
                str += '+';
                attr_opt_id += '-';
              }
              str += obj2.name;
              attr_opt_id += obj2.id;
            }
          }
        }
        $('#selected')[0].value = str;
        $('#attr_opt_id')[0].value = attr_opt_id;
        $('#sel_attrs')[0].value = JSON.stringify(_attrs);
        for (var idx in _objects) {
          var obj = _objects[idx];
          if (obj.attr_opt_id == attr_opt_id) {
            $('#price')[0].value = (parseFloat('<?php echo $sale_price; ?>', 10) + parseFloat(obj.diff_price, 10)).toFixed(2);
            <?php if ($product->enabled_stock == 1) { ?>
            $('#stock')[0].value = obj.stock;
            for (var idx2 in _cart) {
              var obj2 = _cart[idx2];
              if (obj2.product_track_id == obj.product_track_id && obj2.attr_opt_id == obj.attr_opt_id) {
                $('#stock')[0].value -= obj2.quantity;
                $('#stock')[0].value = Math.max($('#stock')[0].value, 0);
              }
            }
            if ($('#stock')[0].value == 0) {
              $('#stock')[0].style.color = '#ff0000';
            }
            <?php } ?>
          }
        }
      }
      
      function set_attrs() {
        var con, elm, div, table, tr, td;
        con = $('#attrs')[0];
        MyUtils.removeChildElements(con);
        for (var idx in _attrs) {
          var obj = _attrs[idx];
          table = document.createElement('table');
          table.cellPadding = 0;
          table.cellSpacing = 0;
          con.appendChild(table);
          tr = table.insertRow(-1);
          td = tr.insertCell(-1);
          td.style.fontWeight = 'bold';
          td.style.width = '60px';
          //Create attr
          td.appendChild(document.createTextNode(obj.name));
          
          td = tr.insertCell(-1);
          td.colSpan = 3;
          for (var idx2 in obj._opts) {
            var obj2 = obj._opts[idx2];
            elm = __get_imgbtn(obj2, obj, obj2._s && obj2._s == 1);
            td.appendChild(elm);
          }
        }
        update_selected();
      }

      function __get_imgbtn(opt, attr, selected) {
        var div;
        div = document.createElement('span');
        div.className = 'form3';
        if (selected) {
          div.className += ' hi'; 
        }
        div.title = opt.name;
        div.appendChild(document.createTextNode(opt.name));
        div._opt = opt;
        div.onclick = function() {
          for (var idx in attr._opts) {
            var obj = attr._opts[idx];
            delete obj._s;
          }
          this._opt._s = 1;
          set_attrs();
        }
        return div;
      }
  </script>
  </body>
</html>